@onionshack/ocpb-chatbox-sdk-prod 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +219 -0
  2. package/dist/assets/Anuphan-VariableFont_wght.ttf +0 -0
  3. package/dist/assets/down_arrow_icon.png +0 -0
  4. package/dist/assets/profile_64x64.png +0 -0
  5. package/dist/assets/send_icon.png +0 -0
  6. package/dist/chat-widget-sdk.es.js +19631 -0
  7. package/dist/chat-widget-sdk.es.js.map +1 -0
  8. package/dist/chat-widget-sdk.umd.js +34 -0
  9. package/dist/chat-widget-sdk.umd.js.map +1 -0
  10. package/dist/index.d.ts +29 -0
  11. package/package.json +60 -0
package/README.md ADDED
@@ -0,0 +1,219 @@
1
+ # OCPB Chatbot Widget SDK
2
+
3
+ A lightweight, embeddable chat widget powered by React 19, Vite, and Tailwind CSS. Easily integrate a floating chatbot into any website with Firebase backend support and WebSocket real-time messaging.
4
+
5
+ ## Features
6
+
7
+ - 🎯 **Floating Widget**: Unobtrusive bottom-right positioning with expandable interface
8
+ - 💬 **Rich Messaging**: Markdown support (GFM) for formatted bot and user messages
9
+ - 🔄 **Real-time**: WebSocket integration for instant message delivery
10
+ - 🎨 **Customizable**: Configure title, placeholder, suggestions, and styling
11
+ - 📦 **Multiple Integration Options**: Use as React component or vanilla JavaScript
12
+ - 🔥 **Firebase Ready**: Built-in Firebase authentication and storage support
13
+ - âš¡ **Lightweight**: Optimized bundle size with tree-shaking support
14
+
15
+ ---
16
+
17
+ ## Table of Contents
18
+
19
+ - [Quick Start](#quick-start)
20
+ - [Usage](#usage)
21
+ - [Option 1: Vanilla JavaScript (HTML)](#option-1-vanilla-javascript-html)
22
+ - [Option 2: React Component](#option-2-react-component)
23
+ - [Configuration](#configuration)
24
+ - [Installation](#installation)
25
+
26
+ ---
27
+
28
+ ## Quick Start
29
+
30
+ ### Local Development
31
+
32
+ 1. **Clone and install dependencies:**
33
+ ```bash
34
+ npm install
35
+ ```
36
+
37
+ 2. **Start the development server:**
38
+ ```bash
39
+ npm run dev
40
+ ```
41
+
42
+ 3. **Open your browser:**
43
+ Navigate to `http://localhost:5173` to see the demo
44
+
45
+ ---
46
+
47
+ ## Usage
48
+
49
+ ### Option 1: Vanilla JavaScript (HTML)
50
+
51
+ Perfect for integrating into existing websites, WordPress, static HTML pages, or any non-React application.
52
+
53
+ #### Step 1: Include the SDK
54
+
55
+ ```html
56
+ <!DOCTYPE html>
57
+ <html lang="en">
58
+ <head>
59
+ <meta charset="UTF-8">
60
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
61
+ <title>My Website</title>
62
+ </head>
63
+ <body>
64
+ <!-- Your website content -->
65
+ <h1>Welcome to my website</h1>
66
+
67
+ <!-- Load the chat widget SDK -->
68
+ <script src="https://cdn.example.com/chat-widget-sdk.umd.js"></script>
69
+
70
+ <!-- Initialize the widget -->
71
+ <script>
72
+ ChatWidgetSDK.initChatWidget({
73
+ firebaseConfig: {
74
+ apiKey: "YOUR_API_KEY",
75
+ authDomain: "YOUR_AUTH_DOMAIN",
76
+ projectId: "YOUR_PROJECT_ID",
77
+ storageBucket: "YOUR_STORAGE_BUCKET",
78
+ messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
79
+ appId: "YOUR_APP_ID"
80
+ },
81
+ title: 'Customer Support',
82
+ placeholder: 'Type your message...',
83
+ apiUrl: "https://your-api-endpoint.com"
84
+ });
85
+ </script>
86
+ </body>
87
+ </html>
88
+ ```
89
+
90
+ #### Step 2: Programmatic Control (Optional)
91
+
92
+ ```javascript
93
+ // Initialize and store the widget instance
94
+ const widget = ChatWidgetSDK.initChatWidget({
95
+ firebaseConfig: { /* ... */ },
96
+ title: 'Help Center'
97
+ });
98
+
99
+ // Later, remove the widget if needed
100
+ widget.unmount();
101
+ ```
102
+
103
+ ---
104
+
105
+ ### Option 2: React Component
106
+
107
+ Ideal for React applications or Next.js projects.
108
+
109
+ #### Step 1: Install from GitHub Packages
110
+
111
+ First, configure npm to use GitHub Packages. Create or edit `.npmrc` in your project root:
112
+
113
+ ```ini
114
+ @onionshack:registry=https://npm.pkg.github.com
115
+ //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
116
+ ```
117
+
118
+ > **Note**: Generate a GitHub Personal Access Token with `read:packages` scope at https://github.com/settings/tokens
119
+
120
+ Then install the package:
121
+
122
+ ```bash
123
+ npm install @onionshack/ocpb-chatbox-sdk
124
+ ```
125
+
126
+ #### Step 2: Import and Use in Your React App
127
+
128
+ ```jsx
129
+ import ChatWidget from '@onionshack/ocpb-chatbox-sdk';
130
+ import '@onionshack/ocpb-chatbox-sdk/dist/style.css'; // Import styles
131
+
132
+ export default function App() {
133
+ return (
134
+ <div>
135
+ {/* Your app content */}
136
+ <h1>My React App</h1>
137
+
138
+ {/* Chat widget will appear as a floating button */}
139
+ <ChatWidget
140
+ title="Support Chat"
141
+ placeholder="Ask us anything..."
142
+ firebaseConfig={{
143
+ apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
144
+ authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
145
+ projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
146
+ storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
147
+ messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
148
+ appId: process.env.REACT_APP_FIREBASE_APP_ID
149
+ }}
150
+ apiUrl="https://your-api-endpoint.com"
151
+ />
152
+ </div>
153
+ );
154
+ }
155
+ ```
156
+
157
+ ---
158
+
159
+ ## Configuration
160
+
161
+ ### Required Parameters
162
+
163
+ | Parameter | Type | Description |
164
+ |-----------|------|-------------|
165
+ | `firebaseConfig` | `object` | Firebase configuration object (required) |
166
+ | `firebaseConfig.apiKey` | `string` | Firebase API key |
167
+ | `firebaseConfig.authDomain` | `string` | Firebase auth domain |
168
+ | `firebaseConfig.projectId` | `string` | Firebase project ID |
169
+ | `firebaseConfig.storageBucket` | `string` | Firebase storage bucket |
170
+ | `firebaseConfig.messagingSenderId` | `string` | Firebase messaging sender ID |
171
+ | `firebaseConfig.appId` | `string` | Firebase app ID |
172
+
173
+ ### Optional Parameters
174
+
175
+ | Parameter | Type | Default | Description |
176
+ |-----------|------|---------|-------------|
177
+ | `title` | `string` | `'Chat'` | Chat widget header title |
178
+ | `placeholder` | `string` | `'Type your message…'` | Input field placeholder text |
179
+ | `apiUrl` | `string` | `'http://localhost:3000'` | REST API and WebSocket endpoint for chat backend |
180
+ | `fullScreen` | `boolean` | `false` | Enable full-screen mode (no floating button, always open) |
181
+ | `containerId` | `string` | `'chat-widget-root'` | DOM element ID to mount into (JS only) |
182
+
183
+ ### Configuration Examples
184
+
185
+ ```javascript
186
+ ChatWidgetSDK.initChatWidget({
187
+ firebaseConfig: {
188
+ apiKey: "AIza...",
189
+ authDomain: "myapp.firebaseapp.com",
190
+ projectId: "myapp",
191
+ storageBucket: "myapp.appspot.com",
192
+ messagingSenderId: "123456",
193
+ appId: "1:123456:web:abc123"
194
+ },
195
+ title: 'Customer Support',
196
+ placeholder: 'How can we help you?',
197
+ apiUrl: 'https://api.myapp.com',
198
+ containerId: 'custom-chat-container',
199
+ fullScreen: true // No floating button, always visible
200
+ });
201
+ ```
202
+
203
+ ---
204
+
205
+ ## Installation
206
+
207
+ ### For Contributors / Development
208
+
209
+ ```bash
210
+ # Clone the repository
211
+ git clone https://github.com/onionshack/ocpb-chatbot-widget-next.git
212
+ cd ocpb-chatbot-widget-next
213
+
214
+ # Install dependencies
215
+ npm install
216
+
217
+ # Start development server
218
+ npm run dev
219
+ ```
package/dist/assets/down_arrow_icon.png ADDED
Binary file
package/dist/assets/profile_64x64.png ADDED
Binary file
package/dist/assets/send_icon.png ADDED
Binary file